<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>PACP Database Viewer</title>
        <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="lib/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="lib/ext/ux/TabCloseMenu.js">
        </script>
        <script type="text/javascript" src="lib/ext/ux/SearchField.js">
        </script>
        <script type="text/javascript" src="lib/pacp/pacp.js">
        </script>
        <script type="text/javascript" src="lib/jwplayer/swfobject.js">
        </script>
        <!--
        <script src="http://openlayers.org/api/2.8/OpenLayers.js">
        </script>
        <script type="text/javascript" src="lib/GeoExt/script/GeoExt.js">
        </script>
        -->
        <script type="text/javascript" src="lib/pacp/query.js">
        </script>
        <link rel="stylesheet" type="text/css" href="combos.css" />
        <!-- A Localization Script File comes here -->
        <script type="text/javascript">
            //            Ext.onReady(pacp.app.init, pacp.app);
            /*!
             * Ext JS Library 3.3.1
             * Copyright(c) 2006-2010 Sencha Inc.
             * licensing@sencha.com
             * http://www.sencha.com/license
             */
            Ext.onReady(function(){
            
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                /*
                 * Ext.ux.form.MultiSelect Example Code
                 */
                var msForm = new Ext.form.FormPanel({
                    title: 'MultiSelect Test',
                    width: 700,
                    bodyStyle: 'padding:10px;',
                    renderTo: 'multiselect',
                    items: [{
                        xtype: 'multiselect',
                        fieldLabel: 'Multiselect<br />(Required)',
                        name: 'multiselect',
                        width: 250,
                        height: 200,
                        allowBlank: false,
                        store: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
                        tbar: [{
                            text: 'clear',
                            handler: function(){
                                msForm.getForm().findField('multiselect').reset();
                            }
                        }],
                        ddReorder: true
                    }],
                    tbar: [{
                        text: 'Options',
                        menu: [{
                            text: 'Set Value (2,3)',
                            handler: function(){
                                msForm.getForm().findField('multiselect').setValue('2,3');
                            }
                        }, {
                            text: 'Toggle Enabled',
                            handler: function(){
                                var m = msForm.getForm().findField('multiselect');
                                if (!m.disabled) {
                                    m.disable();
                                }
                                else {
                                    m.enable();
                                }
                            }
                        }]
                    }],
                    
                    buttons: [{
                        text: 'Save',
                        handler: function(){
                            if (msForm.getForm().isValid()) {
                                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />' +
                                msForm.getForm().getValues(true));
                            }
                        }
                    }]
                });
                
                
                var ds = new Ext.data.ArrayStore({
                    data: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
                    fields: ['value', 'text'],
                    sortInfo: {
                        field: 'value',
                        direction: 'ASC'
                    }
                });
                
                /*
                 * Ext.ux.form.ItemSelector Example Code
                 */
                var isForm = new Ext.form.FormPanel({
                    title: 'ItemSelector Test',
                    width: 700,
                    bodyStyle: 'padding:10px;',
                    renderTo: 'itemselector',
                    items: [{
                        xtype: 'itemselector',
                        name: 'itemselector',
                        fieldLabel: 'ItemSelector',
                        imagePath: '../ux/images/',
                        multiselects: [{
                            width: 250,
                            height: 200,
                            store: ds,
                            displayField: 'text',
                            valueField: 'value'
                        }, {
                            width: 250,
                            height: 200,
                            store: [['10', 'Ten']],
                            tbar: [{
                                text: 'clear',
                                handler: function(){
                                    isForm.getForm().findField('itemselector').reset();
                                }
                            }]
                        }]
                    }],
                    
                    buttons: [{
                        text: 'Save',
                        handler: function(){
                            if (isForm.getForm().isValid()) {
                                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />' +
                                isForm.getForm().getValues(true));
                            }
                        }
                    }]
                });
                
            });
        </script>
        <style type="text/css">
            #search-results a {
                color: #385F95;
                font: bold 11px tahoma, arial, helvetica, sans-serif;
                text-decoration: none;
            }
            
            #search-results a:hover {
                text-decoration: underline;
            }
            
            #search-results .search-item {
                padding: 5px;
            }
            
            #search-results p {
                margin: 3px !important;
            }
            
            #search-results {
                border-bottom: 1px solid #ddd;
                margin: 0 1px;
                height: 300px;
                overflow: auto;
            }
            
            #search-results .x-toolbar {
                border: 0 none;
            }
            
            .Upstream {
                background-image: url(lib/pacp/images/arrow-up-red.gif);
                background-repeat: no-repeat;
                text-indent: 16px;
                color: red;
                display: block;
            }
            
            .Downstream {
                color: blue;
                background-image: url(lib/pacp/images/arrow-down.gif);
                background-repeat: no-repeat;
                text-indent: 16px;
                width: 16px;
                height: 16px;
                display: block;
            }
            
            #header .api-title {
                color: white;
                font-family: tahoma, arial, sans-serif;
                font-size: 16px;
                font-size-adjust: none;
                font-stretch: normal;
                font-style: normal;
                font-variant: normal;
                font-weight: normal;
                line-height: normal;
                margin: 5px;
            }
            
            #header {
                background: #1E4176 url(hd-bg.gif) repeat-x scroll 0 0;
                border: 0 none;
                padding-left: 3px;
                padding-top: 3px;
            }
            
            .run-summary p {
                font-weight: 900;
                /*                font-size: 80%;
                 */
            }
            
            .run-summary .right {
                float: right;
                /*
                 font-size: 70%;
                 */
            }
            }
            
            .run-summary .comment {
                font-size: 80%;
                font-style: italic;
                color: #5C5858;
            }
            
            button.icon-map {
                background-image: url(lib/pacp/images/map.gif);
            }
            
            button.icon-help {
                background-image: url(lib/pacp/images/icon-question.gif);
            }
            
            span.OK {
                font-size: large;
                color: green;
            }
            
            span.error {
                font-size: large;
                color: red;
            }
        </style>
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    </head>
    <body>
        <div id="header">
            <div class="api-title">
                PACP Database Viewer
            </div>
        </div>
        <!-- Fields required for history management -->
        <form id="history-form" class="x-hidden">
            <input type="hidden" id="x-history-field" />
            <iframe id="x-history-frame">
            </iframe>
        </form>
    </body>
</html>
